import styles from './index.module.css'
import React, { useEffect, useState, useRef } from 'react'

import { Button, Divider } from 'antd-mobile'

import axios from "axios";

function FileUploader() {

    const fileInputRef = React.useRef();

    //[]空数组相当于componentDidMount
    useEffect(() => {

        //返回的函数相当于unmountComponentAtNode
        return () => {

        }
    }, []);


    const handleClick = () => {
        fileInputRef.current.click();
    };

    const handleFileChange = (event) => {
        const file = event.target.files[0];
        // 处理文件上传逻辑
        console.log(file);

        const formData = new FormData();
        formData.append('file', file);
        axios.post('http://172.26.2.18:8081/WCPS/MAIN/000_000_005', formData, {
            headers: {
                'permit': '123456789',
                'Content-Type': 'multipart/form-data'
            },
            onUploadProgress: progressEvent => {
                // progressEvent.loaded 已上传的字节数
                // progressEvent.total 需要上传的总字节数
                const percentComplete = (progressEvent.loaded / progressEvent.total) * 100;
                // 打印上传进度或者用于其他逻辑处理
                console.log(`Upload Progress: ${percentComplete.toFixed(2)}%`);
            }

        }).then(response => {
            console.log('上传成功', response.data);
        }).catch(error => {
            console.error('上传失败', error);
        });
    };


    return (
        <div >
            <input
                type="file"
                style={{ display: 'none' }}
                ref={fileInputRef}
                onChange={handleFileChange}
            />
            <Button onClick={handleClick} block color='primary' size='large'>
                点击上传
            </Button>
        </div>
    )
}

export default FileUploader;
